<template>
	<view class="withdrawal">
		<g-navbar title="提现" backgroundColor="none" fontColor="#ffffff" />
		<view class="main">
			<view class="title">
				当前可提现金额
			</view>
			<view class="amount">
				￥{{amount}}
			</view>
			<view class="withdrawal-module">
				<view class="label">
					提现服务费率:{{withdrawalRate}} + {{extraCharge}}(单笔)
				</view>
				<view class="input-wrapper">
					<view style="display: flex;align-items: center;">
						<view class="unit">
							￥
						</view>
						<input type="number" class="withdraw-input" :placeholder="`金额满${withdrawalMinCount}元即可提现到钱包`"
							placeholder-class="placeholder-class" v-model="withdrawalAmount" @input="input"
							:maxlength="amount.length" />
					</view>
					<view class="full-withdrawal-btn" @click="fullWithdrawal">
						全部提现
					</view>
				</view>
				<view class="withdrawal-to-wrapper" @click="jump">
					<view class="label">
						提现至:
					</view>
					<view class="right">
						<image :src="currentWithdrawalType.icon" class="icon" />
						{{currentWithdrawalType.value}} <i class="iconfont icon-arrow-right" />
					</view>
				</view>
			</view>
			<view class="btn-wrapper">
				<g-button btn_text="申请提现" :width="686" :height="104" :disabled="isBtnDisabled"
					@click="withdrawal"></g-button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { useUserData } from '@/hooks/useUserData';
	import { computed, Ref, ref } from "vue";
	import { useStore } from 'vuex';
	// import { throttle } from '@/utils';
	import { WITHDRAWAL_TYPE__KEY, WITHDRAWAL_WAY } from '@/enum/withdrawal';
	import type { IWithdrawalType } from '@/global';
	import global from '@/global';
	import REST_URL from '@/http/http.restUrl';
	import { CARD_CHECK_STATUS, BIND_PATH } from '@/enum/card_pack';
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	const { updateUserInfo } = useUserData();


	const withdrawalMinCount : Ref<number> = ref(0);

	const withdrawalRate : Ref<string> = ref('');

	const extraCharge : Ref<string> = ref('');


	uni.$off('updateWithdrawalType');
	uni.$on('updateWithdrawalType', (value : WITHDRAWAL_TYPE__KEY) => {
		console.log('updateWithdrawalType')
		selectWithdrawalType(value);
	})




	const withdrawal_way : Ref<WITHDRAWAL_WAY> = ref(WITHDRAWAL_WAY.RED_PACKET_BALANCE);

	onLoad(async (e) => {
		await uni.loginManger.$interceptor;
		withdrawal_way.value = (e.type as WITHDRAWAL_WAY);
		updateUserInfo();
		getWithdrawalMinCount();
	})


	const getWithdrawalMinCount = async () => {
		const { data } = await uni.http.POST(REST_URL.withdrawMin, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
		})
		console.log(data);
		withdrawalRate.value = data.cover_charge;
		extraCharge.value = data.extra_charge;
		switch (Number(withdrawal_way.value)) {
			case WITHDRAWAL_WAY.RED_PACKET_BALANCE:
				withdrawalMinCount.value = data.redpocket_min;
				break;
			case WITHDRAWAL_WAY.BASIC_BALANCE:
				withdrawalMinCount.value = data.balance_min;
				break;
			case WITHDRAWAL_WAY.SUPPORT:
				withdrawalMinCount.value = data.subsidy_balance_min;
				break;
		}
	}

	const amount = computed(() => {
		switch (Number(withdrawal_way.value)) {
			case WITHDRAWAL_WAY.RED_PACKET_BALANCE:
				return store.state.userInfo.red_packet_balance;
			case WITHDRAWAL_WAY.BASIC_BALANCE:
				return store.state.userInfo.balance;
			case WITHDRAWAL_WAY.SUPPORT:
				return store.state.userInfo.subsidy_balance;
		}
	})


	const currentWithdrawalType : Ref<IWithdrawalType> = ref(global.withdrawal_type_list[WITHDRAWAL_TYPE__KEY.WECHAT]);


	const withdrawalAmount : Ref<string> = ref('');

	const store = useStore();

	const isBtnDisabled = computed(() => {
		return Number(amount.value) <= 0 || withdrawalAmount.value.length === 0
	})

	const fullWithdrawal = () => {
		withdrawalAmount.value = amount.value;
	}

	let timer : number
	const input = () => {
		clearTimeout(timer)
		timer = setTimeout(() => {
			if (Number(withdrawalAmount.value) > Number(amount.value)) {
				fullWithdrawal();
			}
		}, 100)
	}

	const selectWithdrawalType = (value : WITHDRAWAL_TYPE__KEY) => {
		currentWithdrawalType.value = global.withdrawal_type_list[value];
	}




	const jump = () => {
		uni.router.route({
			url: '/pages_withdrawal/withdrawal_type/withdrawalType',
			params: {
				current: currentWithdrawalType.value.key
			},
		})
	}

	const withdrawal = async () => {
		if (Number(withdrawalAmount.value) < Number(withdrawalMinCount.value)) {
			return uni.prompt.$showToast(`提现金额不可小于${withdrawalMinCount.value}元`)
		}
		if (store.state.userInfo.id_card_status != CARD_CHECK_STATUS.SUCCESS) {
			return showBindIdCardModal();
		} else if (store.state.userInfo.wechat_img_status != CARD_CHECK_STATUS.SUCCESS && store.state.userInfo.bank_status != CARD_CHECK_STATUS.SUCCESS) {
			return showBindPayWayModal();
		}

		const { data } = await uni.http.POST(REST_URL.redPacketWithdrawal, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			channel: currentWithdrawalType.value.type,
			amount: withdrawalAmount.value,
			page_from: withdrawal_way.value,
		})
		withdrawalAmount.value = '';
		updateUserInfo();
		uni.router.route({
			url: '/pages_withdrawal/withdrawal_success/withdrawalSuccess',
			params: {
				amount: data.amount,
				reach_time: data.reach_time,
				withdrawal_type: currentWithdrawalType.value.value,
			}
		})
	}

	const showBindIdCardModal = () => {
		uni.showModal({
			title: '未绑定身份证',
			content: '提现需绑定身份证，是否立即绑定？',
			confirmText: '立即绑定',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					uni.router.route(BIND_PATH.ID);
				}
			}
		})
	}

	const showBindPayWayModal = () => {
		uni.showModal({
			title: '未绑定结算卡',
			content: '提现需绑定银行卡或微信收款码的结算方式，是否立即绑定？',
			confirmText: '立即绑定',
			cancelText: '取消',
			success: (res) => {
				if (res.confirm) {
					uni.router.route('/pages_bind/card_pack/cardPack');
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	@import "./withdrawal.scss";
</style>